<template>
  <div class="root">
    <div class="menus">
      <div class="menu-item">
        <div class="menu-item__content">
          <div class="menu-item__icon">
            <img src="./icons/select.png" alt="">
            <img src="./icons/down.png" alt="" srcset="">
          </div>
        </div>
        <div>选择</div>
      </div>
      <div class="menu-item">
        <div class="menu-item__content">
          <div class="menu-item__icon">
            <img src="./icons/image.png" alt="">
            <img src="./icons/down.png" alt="" srcset="">
          </div>
        </div>
        <div>图像</div>
      </div>
      <div class="menu-item">
        <div class="menu-item__content">
          <div class="menu-item__icon">

            <img src="./icons/tools.png" alt="">
            <img src="./icons/down.png" alt="" srcset="">
          </div>
        </div>
        <div>工具</div>
      </div>
      <div class="menu-item">
        <div class="menu-item__content">
          <div class="menu-item__icon">
            <img src="./icons/penceil.png" alt="">
            <img src="./icons/down.png" alt="" srcset="">
          </div>
        </div>
        <div>画笔</div>
      </div>
      <div class="menu-item">
        <div class="menu-item__content" >
          <div class="menu-item__icon">

            <img src="./icons/shape.png" alt="">
            <img src="./icons/down.png" alt="" srcset="">
          </div>
        </div>
        <div>形状</div>
      </div>
      <div class="menu-item">
        <div class="menu-item__content" >
          <div class="menu-item__icon">

            <img src="./icons/color.png" alt="">
            <img src="./icons/down.png" alt="" srcset="">
          </div>
        </div>
        <div>颜色</div>
      </div>
      <div class="menu-item">
        <div class="menu-item__content">
          <div class="menu-item__icon">
            <img src="./icons/layer.png" alt="">
            <img src="./icons/down.png" alt="" srcset="">
          </div>
        </div>
        <div>层</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
const data = reactive({

})
</script>



<style scoped>
.menus {
  display: flex;
}


.menu-item {
  min-width: 60px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  text-align: center;

}

.menu-item+.menu-item {
  border-left: 1px solid #f00;
}

.menu-item__icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid #00f;
  padding: 4px 2px;
}

.menu-item__icon:hover {
  background: #9bbaff;
}

.menu-item__content {
  background: #ccc;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
